<template>
	<view class="activity">
		<comHead :title="$t('index.hdzx')" :isLeft="true" :isRight="false"></comHead>
		<view class="videoImg">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item class="swiper-item" v-for="item in bannerList"
					@click="toInfo(item)">
					<image :src="getImg(item.image)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="signIn">
			<view class="top">
				<text>{{$t('index.ylqian')}} {{signInList.signin_num}} {{$t('index.t')}}</text>
				<view class="bug">
					<image src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
					<text>{{parseInt(userinfo.money)}}</text>
					<view class="r" @click="isPay = true">
						<image src="https://siha.vxmeng.com/static/index/jia.png" mode="widthFix" style="height: 34rpx;width: 34rpx;"></image>
					</view>
					<view class="balance-change" v-if="isObtain">+{{ changeAmount }}</view>
				</view>
			</view>
			<view class="c">{{$t('index.zlxqd')}} {{7-signInList.signin_num}} {{$t('index.tkhdlsd')}}！</view>
			<view class="box">
				<view class="item" v-for="(item, index) in 7">
					<view class="tips">
						<text v-if="index+1 == signInList.signin_num && signInList.signin_num != 7">
							<text v-if="signInList.signin_num >= 3">{{$t('index.hy')}} {{7-signInList.signin_num}} {{$t('index.tl')}}</text>
							<text v-else>{{$t('index.hy')}}{{3-signInList.signin_num}}{{$t('index.tl')}}</text>
						</text>
						<text v-if="index+1 == signInList.signin_num && signInList.signin_num == 7">{{$t('index.ywcbzqd')}}</text>
					</view>
					<view class="main">
						<image v-if="index == 2 || index == 6" src="https://siha.vxmeng.com/static/index/significant.png" mode="widthFix"></image>
						<image v-else src="https://siha.vxmeng.com/static/index/normal.png" mode="widthFix"></image>
						<text v-if="index!=2&&index!=6">+{{signInList.day_signin_num}}</text>
						<text v-if="index==2">+{{signInList.three_signin_num}}</text>
						<text v-if="index==6">+{{signInList.seven_signin_num}}</text>
						<image v-if="index < signInList.signin_num" src="https://siha.vxmeng.com/static/index/ok.png" mode="widthFix" style="transform: scale(0.6);transform-origin: -44rpx 32rpx;"></image>
						<image v-else src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
					</view>
					<view class="week">{{week[index]}}</view>
				</view>
			</view>
		</view>
		
		<view class="renwu">
			<text class="tit">{{$t('index.mrrw')}}</text>
			<view class="item">
				<view class="l">
					<image src="https://siha.vxmeng.com/static/index/6.png" mode="widthFix"></image>
				</view>
				<view class="c">
					<text>{{$t('index.fxdsd')}}</text>
					<view class="bot">
						<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
						<text>{{signInList.share_num}}</text>
					</view>
				</view>
<!-- 				<button v-if="!task.isShare" open-type="share" @click="task.isShare=true" style="margin: 0;"><text class="r c2">去分享</text></button>
				<view v-else>
					<text v-if="signInList.day_share==2" class="r c2" @click="Receive(2)">领取</text>
					<text v-else class="r c2 finish">已领取</text>
				</view> -->
				<button v-if="signInList.day_share==2" open-type="share" @click="Receive(2)" style="margin: 0;"><text class="r c2">{{$t('index.qfx')}}</text></button>
				<text v-else class="r c2 finish">{{$t('index.ywc')}}</text>
			</view>
			<view class="item">
				<view class="l">
					<image src="https://siha.vxmeng.com/static/index/7.png" mode="widthFix"></image>
				</view>
				<view class="c">
					<text>{{$t('index.mrqd')}}</text>
					<view class="bot">
						<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
						<template v-if="signInList.day_signin==2">
							<text v-if="signInList.signin_num!=2&&signInList.signin_num!=6">{{signInList.day_signin_num}}</text>
							<text v-if="signInList.signin_num==2">{{signInList.three_signin_num}}</text>
							<text v-if="signInList.signin_num==6">{{signInList.seven_signin_num}}</text>
						</template>
						<template v-else>
							<text v-if="signInList.signin_num!=3&&signInList.signin_num!=7">{{signInList.day_signin_num}}</text>
							<text v-if="signInList.signin_num==3">{{signInList.three_signin_num}}</text>
							<text v-if="signInList.signin_num==7">{{signInList.seven_signin_num}}</text>
						</template>
					</view>
				</view>
				<text v-if="signInList.day_signin==2" class="r c2" @click="Receive(1)">{{$t('index.qqd')}}</text>
				<text v-else class="r c2 finish">{{$t('index.yqd')}}</text>
			</view>
			<view class="item">
				<view class="l">
					<image src="https://siha.vxmeng.com/static/index/5.png" mode="widthFix"></image>
				</view>
				<view class="c">
					<text>{{$t('index.fbdmysi')}}</text>
					<view class="bot">
						<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
						<text>{{signInList.barrage_num}}</text>
					</view>
				</view>
<!-- 				<text v-if="!task.isSend" class="r c2" @click="comLink('/pages/index/index')">去发布</text>
				<view v-else>
					<text v-if="signInList.day_barrage==2" class="r c2" @click="Receive(4)">领取</text>
					<text v-else class="r c2 finish">已领取</text>
				</view> -->
				<text v-if="signInList.day_barrage==2" class="r c2" @click="toSiha">{{$t('index.qfb')}}</text>
				<text v-else class="r c2 finish">{{$t('index.ywc')}}</text>
			</view>
			<view class="item">
				<view class="l">
					<image src="https://siha.vxmeng.com/static/index/5.png" mode="widthFix"></image>
				</view>
				<view class="c">
					<text>{{$t('index.llsfzlsd')}}</text>
					<view class="bot">
						<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
						<text>{{signInList.look_num}}</text>
					</view>
				</view>
<!-- 				<text v-if="!task.isWatch" class="r c2" @click="comLink('/pages/index/index')">去浏览</text>
				<view v-else>
					<text v-if="signInList.day_look==2" class="r c2" @click="Receive(3)">领取</text>
					<text v-else class="r c2 finish">已领取</text>
				</view> -->
				<text v-if="signInList.day_look==2" class="r c2" @click="toIndex">{{$t('index.qll')}}</text>
				<text v-else class="r c2 finish">{{$t('index.ywc')}}</text>
			</view>
		</view>
		<!-- #ifndef MP-TOUTIAO -->
		
		<view class="renwu">
			<view class="item" style="background: linear-gradient(-140deg, rgba(50, 50, 150, 0.5) 0%, rgba(10, 50, 110, 0.65) 100%);">
				<view class="l">
					<image src="https://siha.vxmeng.com/static/index/7.png" mode="widthFix"></image>
				</view>
				<view class="c">
					<text>Hey~</text>
					<view class="bot">
						<text>{{$t('index.jqlqsd')}}:)!</text>
					</view>
				</view>
<!-- 				<text v-if="!task.isJoin" class="r c2" @click="isQRPop = true">前往加入</text>
				<view v-else>
					<text v-if="task.isJoin==1" class="r c2" @click="Receive(4)">领取</text>
					<text v-else class="r c2 finish">已领取</text>
				</view> -->
				<text v-if="!task.isJoin" class="r c2" @click="isQRPop = true">{{$t('index.qwjr')}}</text>
				<text v-else class="r c2 finish">{{$t('index.ywc')}}</text>
			</view>
		</view>
		<!-- #endif -->
		
		<view class="qr" v-if="isQRPop">
			<view class="qrBox">
				<image src="https://siha.vxmeng.com/static/index/qr-box-bg.png" mode=""></image>
				<image @click="isQRPop = false" src="https://siha.vxmeng.com/static/index/close.png" mode="widthFix"></image>
				<view class="tit">{{$t('index.jrgfql')}}</view>
				<view class="info">{{$t('index.lldefl')}}</view>
				<view class="qr-img">
					<image @click="preImg(getImg(signInList.qrcode_image))" :src="getImg(signInList.qrcode_image)" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<comPay v-if="isPay" @hidePay="hidePay"></comPay>
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
			<comLack v-if="isLack" @hide="hideLack" value="10000"></comLack>
		<!-- #endif -->
		<comReward v-if="isObtain"></comReward>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				task: {
					isShare: false,
					isSend: false,
					isWatch: false,
					isJoin: false,
				},
				episodeInfo:{},
				changeAmount:'',
				timer: null,
				isObtain: false,
				isPay: false,
				isLack: false,
				isQRPop: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				userinfo:{},
				week: [this.$t('index.dyt'),this.$t('index.det'),this.$t('index.dst'),this.$t('index.dsit'),this.$t('index.dwt'),this.$t('index.dlt'),this.$t('index.dqt')],
				signInList: {},
				bannerList: [],
			}
		},
		onLoad() {
			this.getUserinfo();
			this.getBannerList();
			this.getUserSignIn();
			this.getEpisodeInfo();
		},
		onShow() {
			if(this.$tools.getStore('share_dou')){
				this.$music.play_obtain();
				this.isObtain = true;
				this.changeAmount = 1000;
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					this.isObtain = false;
					this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
				}, 1500);
				this.$tools.setStore('share_dou', false)
			}
			this.getSystemTask();
		},
		methods: {
			hideLack(){
				this.isLack = false
			},
			hidePay(e){
				this.isPay=false
				if(e == 1){
					this.isLack = true
				}else{
					this.getUserinfo()
				}
			},
			toInfo(item){
				this.comLink(`/pages/index/activityInfo?img=${item.images}`)
			},
			preImg(current){
				// #ifdef MP-WEIXIN
				console.log(current);
				wx.previewImage({
					current,
					urls: [current],
				})
				// #endif
			},
			//领取嘶豆
			async Receive(id){
				this.$music.play_obtain();
				this.isObtain = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					this.isObtain = false;
					this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
				}, 1500);
				switch (id) {
				  case 2:
				    this.task.isShare = true
						this.changeAmount = this.signInList.share_num;
				    break;
				  case 1:
						if(this.signInList.signin_num == 2){
							this.changeAmount = this.signInList.three_signin_num
						}else if(this.signInList.signin_num == 6){
							this.changeAmount = this.signInList.seven_signin_num
						}else{
							this.changeAmount = this.signInList.day_signin_num
						}
				    break;
					// case 4:
					// 	this.task.isSend = true
					// 	this.changeAmount = this.signInList.barrage_num;
					// 	break;
					// case 3:
					// 	this.task.isWatch = true
					// 	this.changeAmount = this.signInList.look_num;
					// 	break;
				}
				const res = await this.$myRequest({
					url: 'api/task/doAddUserTesk',
					data: {
						type: id
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.getSystemTask()
				}
			},
			async getUserSignIn() {
				const res = await this.$myRequest({
					url: 'api/task/getUserSignin',
					method: 'GET',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
				}
			},
			async getSystemTask() {
				const res = await this.$myRequest({
					url: 'api/system/getSystemTask',
					method: 'GET',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.signInList = res.data
				}
			},
			async getUserinfo() {
				const res = await this.$myRequest({
					url: 'api/user/index',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userinfo = res.data
				}
			},
			toSiha() {
				this.$music.play_confirm_2()
				// #ifdef MP-WEIXIN
				if (this.episodeInfo.video_type == 2) {
					this.comLink('/pages/index/siha?id=' + this.episodeInfo.episode_info_id)
				} else {
					this.comLink('/pages/index/siha2?id=' + this.episodeInfo.episode_info_id)
				}
				// #endif
				// #ifndef MP-WEIXIN
				this.comLink('/pages/index/siha_dy?id=' + this.episodeInfo.episode_info_id)
				// #endif
				
			},
			toIndex(){
				this.$tools.toTabs('/pages/index/index')
			},
			async getEpisodeInfo() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeInfo',
					data: {
						source: 1,
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.episodeInfo = res.data
				}
			},
			async getBannerList(){
				const res = await this.$myRequest({
					url: 'api/system/getSystemBanner',
					method: 'GET',
					data: {}
				})
				if(res.code == 1){
					console.log(res);
					this.bannerList = res.data
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.activity {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to right bottom, rgb(14, 7, 21), rgb(1, 2, 5));
		display: flex;
		flex-direction: column;

		// align-items: center;
		.videoImg {
			width: 100%;
			height: 340rpx;

			.swiper {
				width: 100%;
				height: 340rpx;
			}

			.swiper-item {
				width: 750rpx;
				height: 340px;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.signIn{
			height: 340rpx;
			width: 690rpx;
			margin: 30rpx auto 0;
			border-radius: 20rpx;
			padding: 30rpx;
			background: linear-gradient(100deg, rgba(#222222, 0.5) 0%, rgba(30, 36, 44, 0.65) 100%);
			color: #fff;
			
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				.bug{
					position: relative;
					display: flex;
				  align-items: center;
					color: #FFCC00;
					image{
						width: 40rpx;
						vertical-align: middle;
					}
					.r{
						// display: inline-flex;
						// align-items: center;
						// justify-content: center;
						// color: #fff;
						width: 54rpx;
						height: 38rpx;
						border-radius: 19rpx;
						// font-size: 50rpx;
						// line-height: 38rpx;
						/* 排行榜-第一底色 */
						background: linear-gradient(270deg, #FFCC00 0%, #FF9D00 100%);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 8rpx;
						image{
							width: 34rpx;
						}
					}
					.balance-change {
						position: absolute;
						top: -30rpx;
						width: 100%;
						padding-right: 30rpx;
					  text-align: center;
					  font-size: 18px;
					  color: #fff;
						animation: balanceChangeAnimation 1.5s forwards;
					}
					@keyframes balanceChangeAnimation {
					  0% {
					    opacity: 1;
					    transform: translateY(0);
					  }
					  100% {
					    opacity: 0;
					    transform: translateY(-80rpx);
					  }
					}
				}
			}
			.c{
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #999999;
			}
			
			.box{
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item{
					width: 82rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					.tips{
						width: 82rpx;
						height: 50rpx;
						text{
							width: 88rpx;
							// height: 36rpx;
							padding: 4rpx 2rpx;
							font-size: 14rpx;
							background: #443E49;
							text-align: center;
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							justify-content: center;
							border-radius: 6rpx;
							position: relative;
							&::before{
								content: "";
								width: 0;
								height: 0;
								position: absolute;
								bottom: -6rpx;
								left: 32rpx;
								border-left: 10rpx solid transparent;
								border-right: 10rpx solid transparent;
								border-top: 10rpx solid #443E49;
							}
						}
					}
					.main{
						width: 100%;
						height: 100rpx;
						padding-top: 10rpx;
						font-size: 24rpx;
						position: relative;
						margin-top: 14rpx;
						text-align: center;
						image{
							position: absolute;
							width: 70%;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							&:first-child{
								position: absolute;
								width: 100%;
								height: 108rpx;
								top: 0;
								left: 0;
								transform: none;
							}
						}
					}
					.week{
						font-size: 16rpx;
						color: #999999;
						margin-top: 14rpx;
					}
				}
			}
		}

		.renwu {
			width: 690rpx;
			margin: 20rpx auto 0;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background: linear-gradient(100deg, rgba(#222222, 0.5) 0%, rgba(30, 36, 44, 0.65) 100%);

			.tit {
				font-size: 32rpx;
				color: #fff;
				letter-spacing: 4rpx;
			}

			.item {
				width: 100%;
				height: 112rpx;
				border-radius: 24rpx;
				/* 色块/渐变 */
				background: linear-gradient(100deg, rgba(#222222, 0.5) 0%, rgba(30, 36, 44, 0.65) 100%);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				color: #fff;

				.l {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #D8D8D8;
					width: 48rpx;
					margin-right: 20rpx;

					image {
						width: 48rpx;
						margin-right: 10rpx;
						flex-shrink: 0;
					}
					.bot{
						color: #FFD673;
					}
				}
				
				.c{
					color: #D8D8D8;
					font-size: 24rpx;
					flex: 1;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					image{
						width: 30rpx;
						margin-right: 10rpx;
						vertical-align: middle;
					}
				}

				.r {
					width: 150rpx;
					height: 60rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 60rpx;
					box-sizing: border-box;
					color: #fff;
					text-align: center;

					&.c1 {
						border: 2px solid #FFD673;
						color: #FFD673;
					}

					&.c2 {
						background: linear-gradient(122deg, #00A6FE 16%, #854EFF 86%);	
					}
					&.finish{
						background: #6B6B6B;
					}
				}
			}
		}
		
		.qr{
			width: 100vw;
			height: 100vh;
			background: rgba(#000, 0.9);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 102;
			display: flex;
			justify-content: center;
			align-items: center;
			.qrBox{
				width: 588rpx;
				height: 884rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				>image{
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: -1;
					&:nth-child(2){
						width: 60rpx;
						height: 60rpx;
						bottom: -100rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
				.tit{
					font-size: 48rpx;
					margin-top: 280rpx;
					height: 100rpx;
					text-align: center;
					padding: 0 70rpx;
					display: flex;
					align-items: center;
				}
				.info{
					margin-top: 20rpx;
					padding: 0 50rpx;
					text-align: center;
				}
				.qr-img{
					position: absolute;
					bottom: 136rpx;
					left: 182rpx;
					image{
						width: 228rpx;
					}
				}
			}
		}
	}
</style>